<template>
  <view class="page-detail">
    <view class="navbar">
      <view class="header-info">
        <u-icon class="u-icon" color="#fff" size="22" name="arrow-left" @click="goBack()"></u-icon>
        <view class="title">销售统计单</view>
      </view>
    </view>
    <view class="top-box">
    </view>
    <view class="context">
      <view class="btn-list">
        <view class="btn-box">
          <u-button class="map-btn" type="primary" :custom-style="{ height: '50rpx'}" text="地图"
            @click="previewMap(h)"></u-button>
          <u-button class="down-btn" type="primary" :custom-style="{ height: '50rpx'}" text="销售单下载"
            @click="importPdf(detail.pdfPath)"></u-button>
        </view>
      </view>
      <view class="number-title">
        销售统计单编号：{{detail.ticketCode}}
      </view>
      <u-cell-group title-bg-color="rgb(243, 244, 246)" customStyle="{'font-size': '16px'}">
        <u-cell title="销售企业名称" :label="detail.companyName" @click="goCompanyName()" center isLink></u-cell>
        <u-cell title="采购企业名称" :label="detail.purchaser" center></u-cell>
        <u-cell title="卸货企业名称" :label="detail.unloader" center></u-cell>
        <u-cell title="卸货地址" :label="detail.unloadAddress" center></u-cell>
        <u-cell title="卸货打卡地址" :label="detail.punchAddress" center></u-cell>
        <u-cell title="司机姓名" :value="detail.driverName" center></u-cell>
        <u-cell title="车牌号码" :value="detail.carCode" center></u-cell>
        <u-cell title="煤种" :value="detail.coalName" center></u-cell>
        <u-cell title="单价" :value="detail.unitPrice" center></u-cell>
        <u-cell title="净重" :value="detail.netWeight" center></u-cell>
        <!-- <u-cell title="单价" :value="detail.unitPrice 元/吨" center></u-cell>
                <u-cell title="净重" value="detail.netWeight吨" center></u-cell> -->


      </u-cell-group>
    </view>
    <view class="step-box">
      <liu-step-longitudinal-bar :step="step" :stepList="stepList"></liu-step-longitudinal-bar>
    </view>
  </view>
</template>

<script>
  import {
    getByTicketCode, exportPdfData
  } from "@/api/cockpit/cockpit";
  import config from "@/config";
  export default {
    props: {
      ticketCode: {
        type: String
      },
      pCode: {
        type: String
      }
    },
    data() {
      return {
        detail: {},
        baseUrl: config.baseUrl,
        step: 2, //当前步骤
        stepList: [{
          name: '接单',
          time: '时间：2023-03-13  14:42:00',
          waybillNo: '运单号：1323434343',
          address: '地点：陕西省西安市',
          desc: '入场：排队入场'
        }, {
          name: '制单',
          time: '时间：2023-03-13  14:42:00',
          waybillNo: '运单号：1323434343',
          address: '地点：陕西省西安市',
          desc: '入场：排队入场'
        }, {
          name: '卸货打卡',
          time: '时间：2023-03-13  14:42:00',
          waybillNo: '运单号：1323434343',
          address: '地点：陕西省西安市',
          desc: '入场：排队入场'
        }], //步骤列表
      }
    },
    onShow() {
      this.getDetail();
      // this.getExportPdfData();
    },
    onLoad(option) {
      this.code = option.ticketCode;
    },
    methods: {
      goBack() {
        uni.navigateBack({
          delta: 2, // 返回上2级页面
        });
      },
      importPdf(name) {
        let urlInfo = this.baseUrl + "/system/oss/public/" + name;
        plus.runtime.openURL(urlInfo);
      },
      goCompanyName() {
        this.$tab.navigateTo(`/pages/home/enterprisedetail?name=${this.detail.companyName}
                &companyType=${this.detail.companyType}&nssbh=${this.detail.nssbh}&fddbr=${this.detail.fddbr}&fzrdh=${this.detail.fzrdh}&zcxxdz=${this.detail.zcxxdz}`)
      },
      importPdf(name) {
        let urlInfo = this.baseUrl + "/system/oss/public/" + name;
        plus.runtime.openURL(urlInfo);
      },
      previewMap() {
        if (this.detail.szwz != '') {
          this.$tab.navigateTo(`/pages/home/mapdetail?szwz=${this.detail.szwz}`)
        } else {
          this.$modal.msg('位置不存在');
        }

      },
      async getDetail() {
        let res = await getByTicketCode({ ticketCode: this.code }) || {}
        let data = res.data;

        this.detail = data.billInformation;
        this.stepList = data.processingPath;
        this.stepList.forEach(item => {
          item.time = '时间：' + item.time;
          if (item.waybillNo != undefined) {
            item.waybillNo = '运单号：' + item.waybillNo;
          }
          item.address = '地点：' + item.address;
        });
      },
      preview() {
        this.$tab.navigateTo(`/pages/common/qrcode/index?code=${this.detail.qrCodePath}`)
      }
    }
  }
</script>

<style lang="less" scoped>
  .u-slot-title {
    display: flex;
  }

  .page-detail {
    padding-bottom: 40rpx;

    .navbar {

      .header-info {
        display: flex;
        height: 90rpx;
        line-height: 90rpx;
        margin-top: 86rpx;

        .u-icon {
          width: 10%;
          padding-left: 25rpx;
        }

        .title {
          font-size: 36rpx;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
          width: 75%;
        }

        .right-btn {
          color: #fff;
          font-size: 36rpx;
        }
      }


    }

    .top-box {
      background-image: url("/static/images/common/list-top-bg.png");
      background-repeat: no-repeat;
      background-size: 100%;
      height: 16rpx;
      margin: 186rpx 20rpx 0 20rpx;
    }

    .context {
      background-color: #ffffff;
      margin: 0 20rpx;

      .number-title {
        font-size: 28rpx;
        color: #233239;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        padding-right: 28rpx;
        text-align: right;
      }

      .btn-list {
        width: 100%;
        display: flex;
        justify-content: end;

        .btn-box {
          display: flex;
          width: 45%;

          .map-btn {
            width: 100rpx !important;
          }

          .down-btn {
            width: 200rpx !important;
          }
        }
      }





      /deep/.u-cell {
        line-height: 96rpx;
      }

      /deep/.u-cell__title-text {
        font-size: 30rpx;
        color: #666666;
      }

      /deep/.u-cell__value {
        font-size: 30rpx;
        color: #333333;
        ;
      }

      /deep/.u-cell__label {
        font-size: 30rpx;
        color: #333333;
        ;
      }
    }

    .step-box {
      background: #ffffff;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      margin: 0 20rpx 20rpx;
    }


  }
</style>